<template>
  <PageContainer>
    <view class="container">
      <Header title="个人主页" />
      <UserInfoDetail :currentUser="currentUser"></UserInfoDetail>
      <TButtonGroup v-if="currentUser?.self">
        <TButton
          text="完善资料"
          :customStyle="{
            borderRadius: '44rpx',
            background: '#2878FF',
            width: '686rpx',
            color: '#FFFFFF',
            height: '80rpx',
            lineHeight: '80rpx',
          }"
          @click="handleEditUserInfo"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* userHomePage 个人主页 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import UserInfoDetail from './components/UserInfoDetail.vue';
  import type { RegisterIdAppUserInfo } from '@/api/activity/types';
  import { ref } from 'vue';
  import { navigateTo, onLoad } from '@/router';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import { selectUserPerfectInfoProgress } from '@/api';
  import { onPullDownRefresh, onShow } from '@dcloudio/uni-app';
  import type { FunctionArgs } from '@vueuse/core';

  const currentUser = ref<RegisterIdAppUserInfo>();
  const appUserInfoId = ref();
  let success: FunctionArgs | undefined;
  onLoad<'userHomePage'>((op) => {
    appUserInfoId.value = op.id || op.scene;
    success = op.success;
    getUserInfo();
  });

  const getUserInfo = async () => {
    currentUser.value = await selectUserPerfectInfoProgress(appUserInfoId.value);
  };
  const handleEditUserInfo = () => {
    navigateTo({
      name: 'myProfile',
      options: {
        success: () => {
          getUserInfo();
          success?.();
        },
      },
    });
  };

  onPullDownRefresh(() => {
    getUserInfo();
    uni.stopPullDownRefresh();
  });
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;
  }
</style>
